<%@ page language="java" pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
${aier_doctype}
<html <s:property value="aier_html_xmlns" escape="false"/>>
<head>
<meta http-equiv="Content-Type" content="${aier_content_type}" />
<meta name="keywords" content="${aier_keyworks}" />
<meta name="description" content="${aier_description}" />
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}ui.css" />
<link rel="Stylesheet" href="${aier_css_url}jq/jq.css"/>
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}text.css" />
<link rel="stylesheet" href="${aier_css_url}${aier_jqui_css}enhanced.css" />
<link rel="stylesheet" href="${aier_css_url}social/module/jq-msg.css" />
<link rel="stylesheet" href="${aier_css_url}proxy/bi.css" />

<script type="text/javascript" src="${aier_js_url}j.js"></script>
<script type="text/javascript" src="${aier_js_url}b.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/hh/ui.js"></script>
<script type="text/javascript" src="${aier_js_url}lib/arrayList.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/cn.js"></script>
<script type="text/javascript" src="${aier_js_url}jq/jq.js"></script>
<script type="text/javascript" src="${aier_js_url}jp/msg.js"></script>
<script type="text/javascript" src="${aier_js_url}${aier_jqui_js}custominput.js"></script>
<script type="text/javascript" src="${aier_js_url}${aier_jqui_js}text.js"></script>
</head>
<script type="text/javascript">
	function gridDate() {
		$("#classinfo")
				.jqGrid(
						{
							datatype : "local",
							height:'230',
							width:'1000',  
							colNames : [ 'ic卡号', '姓名', '职务', '身份证', '性别',
									'联系电话', '联系邮箱', '联系地址', '班级', '更新', '移除' ],
							colModel : [ 
							{name : 'icid',index : 'icid',width : 80,align : 'center',
							}, 
							{name : 'cname',index : 'cname',width : 80,align : 'center',
							}, 
							{name : 'position',index : 'position',width : 80,align : 'center',
							},
							{name : 'idcard',index : 'idcard',width : 80,align : 'center',
							}, 
							{name : 'gender',index : 'gender',width : 80,align : 'center',hidden : true
							}, 
							{name : 'phone',index : 'phone',width : 80,align : 'center',
							}, 
							{name : 'email',index : 'email',width : 80,align : 'center',
							}, 
							{name : 'address',index : 'address',width : 80,align : 'center',
							}, 
							{name : 'classes',index : 'classes',width : 80,align : 'center',
							},
							{name : 'update',index : 'update',width : 80,align : 'center',sortable : false
							}, 
							{name : 'remove',index : 'remove',width : 80,align : 'center',sortable : false
							},

							],
							//autowidth:true,

							pager : jQuery("#classpage"),
							//prmNames : {page:"page",sort: "sort"},
							rowNum : 10,
							//rowList: [10, 20, 30],
							sortname : 'cname',
							hidegrid : false,
							sortorder : 'asc',
							viewrecords : true,
							caption : '绑定IC卡信息',
							gridComplete : function() {
								var ids = jQuery("#classinfo").jqGrid(
										'getDataIDs');
								for ( var i = 0; i < ids.length; i++) {
									var id = ids[i];
									var up = "<a href='javascript:;' style='color:#f60' onclick='upDiv("
											+ id + ")' >修改</a>";
									var del = "<a href='javascript:;' style='color:#f60' onclick='delTel("
											+ id + ")'>删除</a>";
									jQuery("#classinfo").jqGrid('setRowData',
											ids[i], {
												update : up,
												remove : del
											});
								}
							}
						}).navGrid("#classpage", {
					edit : false,
					add : false,
					del : false,
					search : false
				});
		//单行添加数据
		$("#b_biAddic")
				.click(
						function() {

							var ids = jQuery("#classinfo").jqGrid('getDataIDs');
							var i;
							if (!isnull(ids)) {
								i = ids.length + 1;
							} else {
								i = 1;
							}
							var d_bicards = " ";
							if (!isnull($("#d_bicards").html())) {
								d_bicards = $("#d_bicards").html();
								if(0==index){
								iccards.remove(iccards.size() - 1);
								}else{
								iccards.remove(index-1);
								}
								
								index=0;
								biNext();
								
								
							}else{
								$().message("没有空IC卡！");
								return
							}
							var txt_biName = " ";
							if (!isnull($("#txt_biName").val())) {
								txt_biName = $("#txt_biName").val();
							}

							var sel_position = " ";
							if (!isnull($("#sel_position").find(
									"option:selected").text())) {
								sel_position = $("#sel_position").find(
										"option:selected").text();
							}

							var sel_classes = " ";
							if (!isnull($("#sel_region")
									.find("option:selected").text())) {
								sel_classes = $("#sel_region").find(
										"option:selected").text();
							}

							var txt_idCard = " ";
							if (!isnull($("#txt_idCard").val())) {
								txt_idCard = $("#txt_idCard").val();

							}

							var txt_tel = " ";
							if (!isnull($("#txt_tel").val())) {
								txt_tel = $("#txt_tel").val();
							}

							var txt_region = " ";
							if (!isnull($("#txt_region").val())) {
								txt_region = $("#txt_region").val();
							}

							var province = " ";
							if ("请选择" != $("#province").find("option:selected")
									.text()) {
								province = $("#province").find(
										"option:selected").text();
							}
							var city = " ";
							if ("请选择" != $("#city").find("option:selected")
									.text()) {
								city = $("#city").find("option:selected")
										.text();
							}
							var area = " ";
							if ("请选择" != $("#area").find("option:selected")
									.text()) {
								area = $("#area").find("option:selected")
										.text();
							}
							var street = " ";
							if ("请选择" != $("#street").find("option:selected")
									.text()) {
								street = $("#street").find("option:selected")
										.text();
							}

							if ($('#r_male').attr("checked") == "checked") {
								jQuery("#classinfo").jqGrid(
										'addRowData',
										i,
										{
											icid : d_bicards,
											cname : txt_biName,
											gender : '男',
											position : sel_position,
											idcard : txt_idCard,
											classes : $("#sel_class").find(
													"option:selected").text(),
											phone : $("#txt_tel").val(),
											email : txt_tel,
											address : province + city + area
													+ street + txt_region
										});
							}
							$().message("添加成功");
						});

		//完成按钮事件
		$('#but_next')
				.click(
						function() {

							//获得班级名称
							var gr = jQuery("#classinfo").jqGrid('getRowData');

							var dates = "";
							var alldates = "";
							for ( var i = 0; i < gr.length; i++) {
								dates = gr[i].icid + "/" + gr[i].cname + "/"
										+ gr[i].position + "/" + gr[i].idcard
										+ "/" + gr[i].phone + "/" + gr[i].email
										+ "/" + gr[i].address + "/"
										+ gr[i].classes;
								if (i == (gr.length - 1)) {
									alldates += dates;
								} else {
									alldates += dates + ",";

								}
							}

							var fun = function(data) {
								if (10001 == data.s) {
									$("#d_amNUpdate")
											.dialog(
													{
														//hide : "explode",
														resizable : false,
														height : 250,
														width : 450,
														modal : true,
														buttons : {
															"确定" : function() {
																window
																		.open("${aier_url}${aier_uri}down_mod${aier_suffix}");
															}
														}
													});
								}
							};
							exeAjax(
									ajaxUrl("${aier_url}${aier_urijs}quicksc_bind_addlist${aier_suffix}"),
									fun, {
										"bindInfo" : alldates,
									});

						});
		//loadCDates();
		function loadCDates() {
			var fun = function(data) {
				if (10001 == data.s) {
					var cmdates = data.cnames;
					if (!isnull(cmdates) && cmdates.split(",").length > 0) {
						for ( var i = 0; i < cmdates.split(",").length; i++) {
							var li = cmdates.split(",")[i];

							jQuery("#classinfo").jqGrid('addRowData', i + 1, {
								cname : li
							});
						}
					}
				}
			};
			exeAjax(
					ajaxUrl("${aier_url}${aier_urijs}quicksc_bind_selectlist${aier_suffix}"),
					fun, {

					});

		}
	}

	function delTel(id) {
		var su = jQuery("#classinfo").jqGrid('delRowData', id);
		if (su) {
			iccards.add(jQuery("#classinfo").jqGrid('delRowData', id).icid);
			alert("删除成功");
		}
	}
	
	
	
	loadclasses();
	//获取session中的班级
	function loadclasses() {
		var fun = function(data) {
			if (10001 == data.s) {
				var c = data.bind_classesInfoList;
				if (!isnull(c) && 0 < c.length) {

					for ( var i = 0; i < c.length; i++) {
						$("#sel_class").append("<option>" + c[i] + "</option>");
					}

				}
			}
		};
		exeAjax(
				ajaxUrl("${aier_url}${aier_urijs}quicksc_bind_loadclasses${aier_suffix}"),
				fun, {

				});
	}
	loadgrades();
	//获取session中的的考勤分类
	function loadgrades() {
		var fun = function(data) {
			if (10001 == data.s) {
				var g = data.bind_agdates;
				if (!isnull(g)) {
					for ( var i = 0; i < g.split(",").length; i++) {
						$("#sel_position").append(
								"<option>" + g.split(",")[i] + "</option>");

					}

				}

			}
		};
		exeAjax(
				ajaxUrl("${aier_url}${aier_urijs}quicksc_bind_loadgrades${aier_suffix}"),
				fun, {

				});
	}

	var iccards = new ArrayList();
	//可用IC卡
	function loadCards() {
		var fun = function(data) {
			if (10001 == data.s) {
				if (!isnull(data.bind_mcards)) {
					//iccards = data.bind_mcards;

					for ( var i = 0; i < data.bind_mcards.length; i++) {
						iccards.add(data.bind_mcards[i]);
					}
					biNext();
				}
			} else if (10000 == data.s) {
				iccards = null;
			}
		};
		exeAjax(
				ajaxUrl("${aier_url}${aier_urijs}quicksc_bind_loadcards${aier_suffix}"),
				fun, {

				});
	}
	loadCards();
	var index = 0;
	//换一个
	function biNext() {
		if (!isnull(iccards) && 0 < iccards.size()) {
			$("#d_bicards").html(iccards.get(index));

			if (index == iccards.size() - 1) {
				index = 0;
			} else {
				index += 1;
			}
		} else {
			$("#d_bicards").html(null);
		}

	}
</script>
<body>
	<div id="tabs">
		<ul>
			<li><br></li>
			<li><a href="#tabs-1">绑定IC卡</a>
			</li>
		</ul>
		<div id="tabs-1" style="height: 650px;">
			<div class="d_content">
				<div class="d_scnOut">
					<div class="d_scname">
						<span>卡号:</span>
					</div>
					<div class="d_cardNum" id="d_bicards"></div>
					<button id="b_biNext" onclick="biNext()"
						style="margin-left: 250px;margin-top: -20px;"
						class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
						role="button" aria-disabled="false">
						<span class="ui-button-text">换一个</span>
					</button>
				</div>
				<div>
					<div class="d_scnOut">
						<div class="d_scname">
							<label for="txt_biName">姓名:</label>
						</div>
						<div class="d_nametext">
							<input type="text" id="txt_biName">
						</div>
						<div class="d_male" style="visibility: hidden;">
							<input name="gender" type="radio" id="r_male" checked="checked"><label
								for="r_male">男</label>
						</div>
						<div class="d_female" style="visibility: hidden;">
							<input name="gender" type="radio" id="r_female"><label
								for="r_female">女</label>
						</div>
					</div>
					<div class="d_scnOut">
						<div class="d_scname">
							<label for="txt_idCard">身份证:</label>
						</div>
						<div class="d_sctext">
							<input type="text" id="txt_idCard">
						</div>
					</div>
					<div class="d_scnOut">
						<div class="d_scname">
							<label for="txt_tel">联系电话:</label>
						</div>
						<div class="d_sctext">
							<input type="text" id="txt_tel">
						</div>
					</div>
				</div>
				<div style="margin-top: -120px;margin-left: 290px;">
					<div class="d_scnOut">
						<div class="d_scname">
							<label for="sel_position">职务:</label>
						</div>
						<div class="sel_region">
							<select id="sel_position">

							</select>
						</div>
					</div>
					<div class="d_scnOut">
						<div class="d_scname">
							<label for="sel_class">选择班级:</label>
						</div>
						<div class="sel_region">
							<select id="sel_class">

							</select>
						</div>
					</div>
					<div class="d_scnOut">
						<div class="d_scname">
							<label for="txt_email">联系邮箱:</label>
						</div>
						<div class="d_sctext">
							<input type="text" id="txt_email">
						</div>
					</div>
				</div>
				<div class="d_scnOut">
					<div class="d_scname">
						<label>联系地址:</label>
					</div>
					<div class="sel_region">
						<s:action name="citiesmap_cc" namespace="/common"
							executeResult="true"></s:action>
						<div class="d_address">
							<input id="txt_region" type="text">
						</div>
					</div>
				</div>

				<button id="b_biAddic" style="margin-left: 687px;margin-top: 22px;"
					class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
					role="button" aria-disabled="false">
					<span class="ui-button-text">添&nbsp&nbsp加</span>
				</button>


				<div style="margin-top: 0px;margin-left: 0px;">
					<table id="classinfo"></table>
					<div id="classpage"></div>
				</div>

				<button id="but_previous"
					style="margin-left: 300px;margin-top: 20px;"
					class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
					role="button" aria-disabled="false">
					<span class="ui-button-text">上一步</span>
				</button>
				<button id="but_next" style="margin-left: 100px;margin-top: 20px;"
					class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"
					role="button" aria-disabled="false">
					<span class="ui-button-text">完&nbsp&nbsp成</span>
				</button>

				<div id="d_amNUpdate" title="下载模板" style="display: none;">
					<div class="d_scnOut">
						<div class="d_scname">
							<label for="txt_cmupName">模板已生成是否确认下载？</label>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	gridDate();
	$("#tabs").tabs();
	$('#but_previous')
			.click(
					function() {
						location.href = "${aier_url}proxy/creates_assignCards${aier_suffix}?pid=${pid}";
					});
	
</script>
</html>